<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
	<script type="text/javascript" src="Scripts/CanvasLib/2D/dom-utils.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/canvas-extentions.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/shape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/line.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/responsive-line.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/rect.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/responsive-rect.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/image.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/circle.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/arrow.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/text.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/irregular-shape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/responsive-irregular-shape.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/2D/scene.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/2D/animation.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/2D/draggable.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/scene.js"></script>
	<!-- END MOSHU'S -->
	
	<!-- INCLUDE SNAKE'S LIBRARY-->
	<script type="text/javascript" src="Scripts/SceneEditor/Painters/painter.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/Painters/irregular-shape-painter.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/json3.js"></script>
	<script type="text/javascript" src="Scripts/SceneEditor/sceneEditor.js"></script>
	<script type="text/javascript" src="Scripts/Demos/snake.js"></script>
	<!-- END SNAKE'S -->
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
				<div class="property category">
					Scene Actions
				</div>
				<div class="property">
					<div class="label">Force redraw</div>
					<div class="value"><input type="button" value="Invalidate" onclick="scene.invalidate();"/></div>						
				</div>
				<div class="property">
					<div class="label">Reset to initial</div>
					<div class="value"><input type="button" value="Reset" onclick="createScene()"/></div>						
				</div>
				<div class="property">
					<div class="label">Clear all</div>
					<div class="value"><input type="button" value="Clear" onclick="scene.clear();"/></div>						
				</div>					
				<div class="property category">
					Drag-Drop
				</div>					
				<div class="property">
					<div class="label">Yellow image</div>						
					<div class="value"><input type="button" value="Set draggable" onclick="MakeImageDraggable()"/></div>						
				</div>
				<div class="property">
					<div class="label"></div>						
					<div class="value"><input type="button" value="Reset draggable" onclick="ResetImageDraggable()"/></div>						
				</div>					
				<div class="property">
					<div class="label">Green rectangle</div>						
					<div class="value"><input type="button" value="Set draggable" onclick="MakeRectangleDraggable()"/></div>						
				</div>
				<div class="property">
					<div class="label"></div>						
					<div class="value"><input type="button" value="Reset draggable" onclick="ResetRectangleDraggable()"/></div>						
				</div>
				<div class="property">
					<div class="label">Text shape</div>						
					<div class="value"><input type="button" value="Set draggable" onclick="MakeTextDraggable()"/></div>						
				</div>
				<div class="property">
					<div class="label"></div>						
					<div class="value"><input type="button" value="Reset draggable" onclick="ResetTextDraggable()"/></div>						
				</div>
				<div class="property">
					<div class="label">Stress test</div>						
					<div class="value"><input type="button" value="Add 100 images" onclick="AddLotsOfImages()"/></div>						
				</div>
				<div class="property category">
					Animations
				</div>	
				<div class="property">
					<div class="label">Yellow image</div>						
					<div class="value"><input type="button" value="Animate" onclick="AnimateImage()"/></div>						
				</div>
				<div class="property category">
					Shape Manipulation
				</div>
				<div class="property">
					<div class="label">Resize small rectangle</div>						
					<div class="value"><input type="button" value="Resize" onclick="rect.resize(100,100);"/></div>						
				</div>					
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Available functionalities</h2>
				<strong>Setup the scene</strong><br>
				<ul>
					<li>Set background image or color.</li>
				</ul>
				<br>
				<strong>Draw elements</strong><br>
				<ul>
					<li>Behaviour : elements can overlap - property zIndex is provided.</li>
					<li>Behaviour : elements have move and resize functions.</li>
					<li>Appearance : elements have strokeColor, strokeWidth and fillColor attributes. Of course these have no effect on image elements.</a>
					<li>Elements: Line, ArrowedLine, Rectangle, Circle, CanvasImage .</li>
				</ul>
				<br>
				<strong>Behaviour functionalities</strong><br>
				<ul>
					<li>Animation - move (with speed or total animation time) - provides progress with percent parameter, and finished callbacks.</li>
					<li>Draggable - elements can be set draggable.</li>
				</ul>
				<br>
				<h2>How to use</h2>
				<h3>Setup</h3>
				<ol>
					<li><strong>Include the library JS files.</strong></li>
					<li><strong>Add a canvas element to your DOM.</strong></li>
					<li><strong>Setup your scene : </strong><br>
						eg:<br><br>
						var scene = new Scene("canvasId");<br>
						scene.setBackgroundColor("#cecece");<br>
						scene.setBackgroundImage("img.jpg");<br>
					</li>
					<li><strong>Add elemnents to your scene:</strong><br>
						eg:<br><br>
						var rect = new Rectangle(200,80,30,30);<br>
						rect.zIndex = 4;<br>
						scene.add(rect);<br><br>
						
						var img = new CanvasImage(100,100, 50,50,"./res/img1.png");<br>
						img.zIndex = 333;<br>
						scene.add(img);<br><br>
						
						var circle = new Circle(300,300,50);<br>
						circle.zIndex = 11;<br>
						scene.add(circle);<br>
						....
					</li>
					<li><strong>Draw the elements into the scene:</strong><br>
						eg:<br><br>
						setTimeout(function(){<br>
							&nbsp;&nbsp;&nbsp;scene.invalidate();<br>
						}, 500);<br>
					</li>
					<li><strong>Animate an element:</strong><br>
						eg:<br><br>
						var anim = new Animation(circle, {mode:"speed"});<br>
						anim.animateMove(300,100,0.5,function(percent){<br>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// animation progress callback<br>
							&nbsp;&nbsp;&nbsp;}, function(){<br>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// animation finished callback<br>
							&nbsp;&nbsp;&nbsp;});<br>
					</li>
					<li><strong>Set an element as draggable:</strong><br>
					eg:<br><br>
						var draggable = new Draggable();<br>
						draggable.setDraggable(circle);<br>
						draggable.setDraggable(line);<br>
						....
					</li>
				</ol>
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
		var scene = new Scene("c");
		
		var line = null;
		var txt = null;
		var rect = null;
		var sh = null;
		var img = null;
		var circle = null;
		var respRect = null;
		var anim = null;
		function createScene(){
			scene.clear();
			line = new ArrowedLine(50,50,100,100);
			line.zIndex = 50;
			scene.add(line);
			
			line = new ResponsiveLine(50,50,100,100);
			line.zIndex = 50;
			scene.add(line);
			
			txt = new CanvasText(200,300);
			scene.add(txt);
			txt.setText("Hello!!! What's up?");
			txt.fillColor = "#000";		
			
			rect = new Rectangle(200,80,30,30);
			rect.zIndex = 4;
			rect.fillColor = "#0f0";
			rect.strokeColor = "#0f0";
			scene.add(rect);
			
			sh = new IrregularShape([{x:200,y:300},{x:400,y:300},{x:400,y:330},{x:350,y:330},{x:350,y:400},{x:320,y:400},{x:320,y:330},{x:200,y:330}]);
			scene.add(sh);
			
			sh = new ResponsiveIrregularShape([{x:55,y:50},{x:75,y:50},{x:75,y:60},{x:55,y:60}]);
			scene.add(sh);
			
			img = new CanvasImage(100,100, 50,50,"./images/img1.png");
			img.zIndex = 40;
			scene.add(img);
			
			circle = new Circle(300,300,50);
			circle.zIndex = 11;
			circle.strokeColor = "#f00";
			circle.strokeWidth=3;
			scene.add(circle);
					
			respRect = new ResponsiveRectangle(20,20,30,30);
			respRect.borderRadius = 0;
			scene.add(respRect);
			
			setTimeout(function(){
				scene.invalidate();
			}, 500);
			scene.setBackgroundColor("#cecece");
			scene.setBackgroundImage("./images/img.jpg");
			anim = new Animation(img, {mode:"speed"});
		}
		
		createScene();
		
		
		var startTime = 0;
		function AnimateImage(){
			var speed = 1000;
			var startTime = new Date().getTime();
			anim.animateMove(400,300,speed, function(percent){
				//console.log(percent);				
			}, function(){					
				anim.animateMove(300,100,speed,function(percent){
					//console.log(percent);
				}, function(){
					anim.animateMove(100,100, speed, function(percent){}, function(){
						//alert(new Date().getTime() - startTime);
					});
				});
			});
		}
		var draggable = new Draggable();
		function MakeRectangleDraggable(){
			
			draggable.setDraggable(rect);
		}
		
		function ResetRectangleDraggable(){
			draggable.resetDraggable(rect);
		}
		
		function MakeImageDraggable(){
			draggable.setDraggable(img);
		}
		
		function ResetImageDraggable(){
			draggable.resetDraggable(img);
		}
		
		function MakeTextDraggable(){
			draggable.setDraggable(txt);
		}
		
		function ResetTextDraggable(){
			draggable.resetDraggable(txt);
		}
		
		function DrawLineChart(){
			scene.clear();
			var chart = new LineChart(0,0,640,480);
			scene.add(chart);
		
			scene.invalidate();
		}		
		
		
		function AddLotsOfImages(){
			scene.clear();
			for(var i=0;i<100;i++){
				var x = Math.floor((Math.random() * 610) + 1);
				var y = Math.floor((Math.random() * 450) + 1);
				var a = new CanvasImage(x,y, 50,50,img.img);
				a.zIndex=Math.floor((Math.random() * 100) + 1);
				scene.add(a);
				draggable.setDraggable(a);
			}
			scene.invalidate();
		}

	    //scene.context.rotate(90 * Math.PI / 180);
		setTimeout(function () {            
		    
		    var i = new Image();
		    i.onload = function () {
		        var angle = 0;
		        var x = 200;
		        var y = 200;
		        var h = 50;
		        var w = 50;
		        //scene.context.translate(x, y);
		        var to_radians = Math.PI / 180;
		        setInterval(function () {

		            if (angle <= 90) {
		                
		                //scene.context.save();
		                scene.context.translate(x + w / 2, y + h / 2);
		                scene.context.rotate(to_radians);
		                console.log(angle + " " + (angle * to_radians));
		                scene.context.drawImage(i, -w / 2, -h / 2, w, h);

		                scene.context.translate(-(x + w / 2),-(y + h / 2));
		                
		                //scene.context.restore();
		                
		                angle += 1;
		                //angle = 100;
		            }
		        }, 20);
		        console.log("rotating");
		        //scene.context.rotate(1);
		        console.log("drawing image");
		        
		    };
		    i.src="./images/img1.png";
		}, 2000);

	</script>
</body>
</html>